<template>
  <div class="container">
    <div class="upload-video" :class="{ 'upload-video-error': upload.error }">
      <i v-if="upload.url" class="el-icon-delete delete" @click="deleteUrl" />
      <video v-if="upload.url" :src="upload.url" controls="controls">
        您的浏览器不支持视频播放
      </video>
      <el-upload
        v-else
        accept=".mp4"
        action="#"
        :http-request="uploadRequest"
        list-type="picture-card"
        :show-file-list="false"
      >
        <el-tooltip
          effect="dark"
          :content="tipContent"
          placement="bottom-start"
        >
          <i
            :class="upload.loading ? 'el-icon-loading' : 'el-icon-plus'"
          />
        </el-tooltip>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/common'
export default {
  name: '',
  components: {},
  props: {
    initUrl: {
      // 图片初始化
      type: String,
      default: ''
    },
    tipContent: {
      // 提示
      type: String,
      default: '要求MP4格式、编码格式： H.264、大小在120M以内的视频'
    }
  },
  data() {
    return {
      upload: {
        url: this.initUrl ? this.initUrl : '', // 上传后的地址
        loading: false,
        error: false
      }
    }
  },
  watch: {
    initUrl(e) {
      this.upload.url = e
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    deleteUrl() {
      this.upload = {
        url: '', // 上传后的地址
        loading: false,
        error: false
      }
      this.$emit('upload', '')
    },
    uploadRequest(e) {
      const fileName = e.file.name
      const type = fileName.split('.').pop().toLowerCase()
      const isJPG = type === 'mp4'
      this.upload.loading = true
      if (!isJPG) {
        this.$message.error('上传格式不正确!')
        this.upload.loading = false
      } else {
        const formData = new FormData()
        formData.append('file', e.file)
        const date = new Date()
        formData.append('biz', 'public/special/' + date.getFullYear() + '/' + parseInt(date.getMonth() + 1))
        uploadFile(formData).then((res) => {
          this.upload = {
            url: res.result.url,
            loading: false,
            error: false
          }
          this.$emit('upload', res.result.fileId)
        }).catch(err => {
          this.upload = {
            url: '',
            loading: false,
            error: false
          }
        })
      }
    },
    // 错误显示
    uploadError(falg) {
      this.upload.error = falg
    },
    // 重置
    resetUpload() {
      this.upload = {
        url: '', // 上传后的地址
        loading: false,
        error: false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  .upload-video {
    .delete{
      position: absolute;
      right: 0;
      padding: 10px;
      cursor: pointer;
      z-index: 9999;
      color: #fff;
      text-align: right;
      background: rgba(0,0,0,0.6);
    }
    video{
      width: 100%;
      height: 200px;
    }
    ::v-deep {
      .el-upload {
        width: 340px;
        padding: 2px;
      }
    }
  }

  .upload-video-error {
    ::v-deep {
      .el-upload {
        border-color: #ff4949;
      }
    }
  }
}
</style>
